<template>
  <a-layout-header style="background: #fff; padding: 0 32px;height: 64px;box-sizing: border-box;">
    <a-flex justify="space-between" align="center">
      <a-space>
      <menu-unfold-outlined v-if="globalStore.collapsed" class="trigger" @click="globalStore.changeCollapsed" />
      <menu-fold-outlined v-else class="trigger" @click="globalStore.changeCollapsed" />
      <ReloadOutlined class="trigger" @click="() => router.go(0)" />
    </a-space>
    <a-dropdown>
      <a-space>
      <a-avatar :size="48" :src="userInfo?.avatar">
        <template #icon><UserOutlined /></template>
      </a-avatar>
      <span>{{ userInfo?.username }}</span>
      </a-space>
    <template #overlay>
      <a-menu>
        <a-menu-item @click="handleNavigateCenter">
          <a-space>
            <UserOutlined />个人中心
          </a-space>
        </a-menu-item>
        <a-menu-item @click="handleNavigateChangePassword">
          <a-space>
            <LockOutlined />修改密码
          </a-space>
        </a-menu-item>
        <a-menu-item @click="handleLogout">
          <a-space>
            <LogoutOutlined />退出系统
          </a-space>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
    </a-flex>
  </a-layout-header>
</template>

<script setup>
import {ref,onMounted} from 'vue';
import { message } from 'ant-design-vue';
import { useGlobalStore } from '@/stores/global';
import { useRouter } from 'vue-router';
import { MenuUnfoldOutlined, MenuFoldOutlined, ReloadOutlined,LogoutOutlined,UserOutlined,LockOutlined } from '@ant-design/icons-vue';
import { getAdminInfo} from '@/apis/user.js';
const router = useRouter();
const globalStore = useGlobalStore();

const  userInfo = ref({});

const role = localStorage.getItem('role');

const handleLogout = () => {
  localStorage.clear();
  message.success('退出系统成功！');
  router.replace('/login');
};

const handleNavigateCenter = () =>{
  if(role === "ROLE_ADMIN"){
    router.push('/manager/center');
    return;
  }
  router.push('/photographer/center')
};


const handleNavigateChangePassword = () => {

  if(role === "ROLE_ADMIN"){
    router.push('/manager/password');
    return;
  }
  router.push('/photographer/password')
};

const init = async () =>{
  const role = localStorage.getItem('role')
  try {
    if(role === "ROLE_ADMIN"){
      const res = await getAdminInfo();
      userInfo.value = res.data;
      return;
    }
  } catch (error) {
    console.log(error,'get-user-info-error');

  }
}
onMounted(()=>{
  init();
})
</script>

<style lang="less">
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 8px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}
</style>
